<template>
	<view class="container">
		<view class="tabs-box">
			<view :class="['tab',current==item.value?'active':'']" v-for="(item,index) in tabs" :key="item.value"
				@tap="changeTab(item.value)">
				{{item.label}}
			</view>
		</view>
		<view class="content-box">
			  <yzb-position :positions="list" @click="positionDetail" v-if="current===1"></yzb-position>
        <template v-else>
          <view class="item" v-for="(item, index) in companyList" :key="index" @click="onClick(item)">
            <view class="company-cont space-between">
              <view class="flex">
                <image :src="$mConfig.imageUrl + '/image/shop-logo.png'" class="logo"></image>
                <view class="company-name">
                  <view class="title-name"> {{ item.companyName }}</view>
                  <view>民营   300-10000人   家具  家...</view>
                </view>
                </view>
              <image :src="$mConfig.imageUrl + '/image/icon-arrow.png'" class="right-arrow"></image>
            </view>
          <view class="btn">查看更多招聘信息</view>
        </view>
      </template>
			<view class="load-more-box">
				<uni-load-more :status="status" :content-text="contentText" />
			</view>
		</view>
	</view>
</template>

<script>
  import yzbPosition from '@/components/yzb/yzb-position.vue';
	export default {
		components: {
			yzbPosition
		},
		data() {
			return {
				tabs: [{
						label: '职位收藏',
						value: 1
					},
					{
						label: '公司收藏',
						value: 2
					},
				],
				current: 1,
				dataList: [],
				status: 'loading',
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '正在加载',
					contentnomore: '没有更多了'
        },
        list:[],
        companyList:[{
          companyName:'山西洪城运至科技有限公司'
        },{
          companyName:'山西小米科技有限公司'
        }]
			};
		},
		methods: {
			changeTab(value) {
				this.current = value;
      },
      positionDetail(){}
		}
	}
</script>
<style >
page{
  background: #F3F5FA;
}
</style>
<style lang="scss" scoped>
	.container {
		.tabs-box {
			display: flex;
			width: 100%;
			height: 119rpx;
			line-height: 119rpx;
      align-items: baseline;
      background: #fff;

			.tab {
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				margin-right: 62rpx;
			}

			.tab:nth-child(1) {
				margin-left: 58rpx;
			}

			.active {
				font-weight: bold;
				font-size: 40rpx;
				color: #111111;
			}
    }
    .flex{
      display: flex;
    }
    .space-between {
      display: flex;
      justify-content: space-between;
      flex-direction: row;
      align-items: center;
    }

		.content-box {
			background: #F3F5FA;
			padding: 20rpx 20rpx;
    }
    .company-cont{
      .logo{
        width: 88rpx;
        height: 88rpx;
        border-radius: 10rpx;
        margin-right: 22rpx;
      }
      .company-name{
        font-size: 28rpx;
        color: #222;
        .title-name{
          font-size: 36rpx;
          color: #111;
          font-weight: bold;
        }
      }
      .right-arrow{
        width: 36rpx;
        height: 36rpx;
      }
    }
    .btn{
      border:1px solid #4397FF;
      color: #4397FF;
      font-size: 32rpx;
      text-align: center;
      border-radius: 40rpx;
      line-height: 78rpx;
      width: 526rpx;
      margin: 50rpx auto 0;
    }
    .item {
      background-color: $bgcolor_white;
      padding: 34rpx 34rpx 40rpx;
      margin-bottom: 20rpx;
      border-radius: 10rpx;
    }
	}
</style>